import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:easy_refresh/easy_refresh.dart';

import '../../models/product.dart';
import '../../widgets/load_image_widget.dart';
import 'logic.dart';

class ShopPage extends StatelessWidget {
  ShopPage({Key? key}) : super(key: key);

  final ShopLogic logic = Get.put(ShopLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('乡村商城'),
        backgroundColor: Colors.green,
        actions: [
          Obx(() => logic.isAdmin.value
              ? IconButton(
                  icon: Icon(Icons.add),
                  onPressed: logic.goToAddProduct,
                )
              : SizedBox()),
        ],
      ),
      body: Obx(() {
        if (logic.isLoading.value) {
          return Center(child: CircularProgressIndicator());
        }

        if (logic.productList.isEmpty) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.shopping_bag_outlined, size: 60, color: Colors.grey),
                SizedBox(height: 16),
                Text(
                  '暂无商品',
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          );
        }

        return EasyRefresh(
          onRefresh: logic.loadProducts,
          child: GridView.builder(
            padding: EdgeInsets.all(16.w),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.6, // 调整宽高比，给卡片更多高度
              crossAxisSpacing: 16.w,
              mainAxisSpacing: 16.w,
            ),
            itemCount: logic.productList.length,
            itemBuilder: (context, index) {
              return _buildProductCard(logic.productList[index]);
            },
          ),
        );
      }),
    );
  }

  Widget _buildProductCard(Product product) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: InkWell(
        onTap: () => logic.goToProductDetail(product),
        borderRadius: BorderRadius.circular(12.r),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 商品图片
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12.r),
                topRight: Radius.circular(12.r),
              ),
              child: product.imageUrl != null && product.imageUrl!.isNotEmpty
                  ? LoadImageWidget(
                      product.imageUrl!,
                      width: double.infinity,
                      height: 120.h,
                    )
                  : Container(
                      width: double.infinity,
                      height: 120.h,
                      color: Colors.grey[300],
                      child: Icon(Icons.image, color: Colors.grey),
                    ),
            ),
            // 商品信息 - 使用Expanded确保内容不会溢出
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min, // 使用最小空间
                  children: [
                    // 商品名称
                    Text(
                      product.name,
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.bold,
                      ),
                      maxLines: 1, // 减少行数
                      overflow: TextOverflow.ellipsis,
                    ),
                    SizedBox(height: 4.h),
                    // 商品描述
                    Text(
                      product.description,
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey[700],
                      ),
                      maxLines: 1, // 减少行数
                      overflow: TextOverflow.ellipsis,
                    ),
                    Spacer(), // 添加弹性空间
                    // 商品价格
                    Text(
                      '¥${product.price.toStringAsFixed(2)}',
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.red,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    // 库存信息
                    Text(
                      '库存: ${product.stock}',
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
